<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>调度监控系统Dome练习</title>
	<link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\default\easyui.css">
	<link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\icon.css">
	<link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\bootstrap\datagrid.css">

    <!--引入bootstrap样式 和 bootstrap-datetimepicker样式表-->
	<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">

	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:100px;
		}
		#item ul{list-style:none;}
		#item li{
		float:left;
		margin:10px;
		}
	</style>

	<!--menu-->
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--<link rel="stylesheet" type="text/css" href="menu/css/default.css" />-->
	<link rel="stylesheet" type="text/css" href="menu/css/component.css" />
	<!--menu-->
</head>

<body>
<!--顶部-->
<div class="row clearfix">
	<div class="col-md-2 column">
		<img alt="logo" src="plugins\img\timg.jpg" width="245px" height="50px"/>
	</div>
	<div class="col-md-8 column" style="left:20px;">
		<h4>
			调度监控系统dome练习
		</h4>
	</div>
	<div class="col-md-2 column" id='item'>
		<ul>
			<li title="首页">
				<a href="#/index"><span class="glyphicon glyphicon-home"></span></a>
			</li>
			<li title="系统设置">
				<a href="#/setting"><span class="glyphicon glyphicon-cog"></span></a>
			</li>
			<li title="退出系统">
				<span class="glyphicon glyphicon-off" id="exitSystem"></span>
			</li>
		</ul>
	</div>
</div>
<!--顶部-->

<div class="row clearfix">
	<div class="col-md-2 column">
		<!--menu-->
		<nav class="dr-menu">
			<div class="dr-trigger">
				<span class="dr-icon dr-icon-menu"></span>
				<a class="dr-label">菜单</a>
			</div>
			<ul>
				<li><a class="dr-icon dr-icon-user" href="#">调度计划信息</a></li>
				<li><a class="dr-icon dr-icon-camera" href="#">作业信息</a></li>
				<li><a class="dr-icon dr-icon-heart" href="#">作业关系</a></li>
				<li><a class="dr-icon dr-icon-bullhorn" href="#">调度作业执行图</a></li>
				<li><a class="dr-icon dr-icon-download" href="#">全局参数设置</a></li>
				<!--<li><a class="dr-icon dr-icon-settings" href="#">修改密码</a></li>
                <li><a class="dr-icon dr-icon-switch" href="#">退出系统</a></li>-->
			</ul>
		</nav>
		<!--menu-->
	</div>

	<div class="col-md-10 column" style="left:25px;">
		<div class="crumbs-box" style="font-size:15px;margin:10px;">
			<span class="glyphicon glyphicon-home" ></span>
			<i class="fa fa-home"></i>
			<i>调度监控系统</i>
			<em>/</em>
			<i>调度任务信息</i>
		</div>

		<!--条件查询-->
		<div class="search-box">
			<form id="search-form" onsubmit="return false">
				<div class="row">
					<div class="col-sm-2 labelName" style="font-size:20px;">调度计划编号：</div>
					<div class="col-sm-2"><input type="text" id="QplanId" name="planId" class="form-control" maxlength="15"></div>
					<div class="col-sm-2 labelName" style="font-size:20px;">调度计划名称：</div>
					<div class="col-sm-2"><input type="text" id="QplanName"name="planName" class="form-control" maxlength="30"></div>
				</div>
				<div class="row">
					<div class="col-sm-2 labelName" style="font-size:20px;">调度计划类别：</div>
					<div class="col-sm-2">
						<select name="planType" id="QplanType" class="form-control">
							<option value="" selected="selected" >请选择</option>
							<option value="a">a</option>
							<option value="b">b</option>
							<option value="c">c</option>
						</select>
					</div>
					<div class="col-sm-2 labelName" style="font-size:20px;">创建时间：</div>
					<div class="col-sm-6">
						<input type="text" id="fromCreateTime" name="fromCreateTime" class="form-control datePicker" style="display:inline-block;width:auto;">
						--
						<input type="text" id="toCreateTime" name="toCreateTime" class="form-control datePicker" style="display:inline-block;width:auto;">
					</div>
				</div>
				<div class="row" >
					<div class="col-sm-9"></div>
					<div class="col-sm-2">
						<button class="btn btn-primary" id="submitSearch" onclick="query()" style="font-size:18px;">搜索</button>
						<button class="btn btn-primary" id="submitReset" type="reset"style="font-size:18px;" >重置</button>
					</div>
				</div>
			</form>
		</div>

		<!--内容显示面板-->
		<table id="dg" title="调度计划信息" class="easyui-datagrid" style="width:900px;height:350px;"
			   url="/scheduler/plans" method="get"
			   toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true"
			   singleSelect="true" data-options="
				rownumbers:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10">
			<thead>
			<tr>
				<th data-options="field:'id',		 align:'center'"width="10" style="font-size:30px;">ID</th>
				<th data-options="field:'planId',	 align:'center'"width="20">调度计划编号</th>
				<th data-options="field:'planType',  align:'center'"width="20">调度计划类别</th>
				<th data-options="field:'planName',  align:'center'"width="20">调度计划名称</th>
				<th data-options="field:'planLevel', align:'center'"width="30">调度计划优先级别</th>
				<th data-options="field:'planParam', align:'center'"width="20">调度计划参数</th>
				<th data-options="field:'createTime',align:'center'"width="35">创建时间</th>
				<th data-options="field:'updateTime',align:'center'"width="35">更新时间</th>
			</tr>
			</thead>
		</table>
		<div id="toolbar">
			<a id="new"  name="newuser" href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"onclick="newUser()" >新增计划信息</a>
			<a id="edit" name="edituser" href="#" class="easyui-linkbutton" iconCls="icon-edit" 	plain="true" onclick="editUser()">修改计划信息</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除计划信息</a>
		</div>

		<!--新增、修改面板-->
		<div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
			 closed="true" buttons="#dlg-buttons">
			<div class="ftitle">调度计划信息</div>
			<form id="fm" method="post" novalidate>
				<div class="fitem">
					<label >调度计划编号:</label>
					<input name="planId" type="text" id="planId"class="easyui-validatebox">
				</div>
				<div class="fitem">
					<label>调度计划类别:</label>
					<input name="planType" type="text" id="planType" class="easyui-validatebox">
				</div>
				<div class="fitem">
					<label>调度计划名称:</label>
					<input name="planName" type="text" id="planName" class="easyui-validatebox">
				</div>
				<div class="fitem">
					<label>调度计划优先级别:</label>
					<input name="planLevel" type="text" id="planLevel" class="easyui-validatebox">
				</div>
				<div class="fitem">
					<label>调度计划参数:</label>
					<input name="planParam" type="text" id="planParam" class="easyui-validatebox">
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a id="insert" style="display:none" href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="insertUser()">确认新增</a>
			<a id="update" style="display:none" href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateUser()">确认修改</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
		</div>
	</div>
</div>
<script src="datetimepicker/jquery-1.9.1.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/bootstrap/jquery.min.js"></script>
<script src="datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="plugins\easyUI\jquery.easyui.min.js"></script>
<script src="menu/js/modernizr.custom.js"></script>
<!--<script src="menu/adsense.js" type="text/javascript"></script>-->
<script src="menu/js/ytmenu.js"></script>
</body>

<script type="text/javascript">
	function query(){
    	var planId=$("#QplanId").val();
		var planType=$("#QplanType").val();
		var planName=$("#QplanName").val();
		var fromCreateTime=$("#fromCreateTime").val();
		var toCreateTime=$("#toCreateTime").val();

		postData={planId:planId,planType:planType,planName:planName,fromCreateTime:fromCreateTime,toCreateTime:toCreateTime},
		$('#dg').datagrid('load',postData);
	}
	$('.datePicker').datetimepicker({
     	language:'zh-CN',
        format:'yyyy-mm-dd hh:ii:ss',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1,
    });


	<!--提交面板数据，新增数据，并关闭面板，更新查询列表-->
	function insertUser(){
		var id=$("#id").val();
		var planId=$("#planId").val();
		var planType=$("#planType").val();
		var planName=$("#planName").val();
		var planLevel=$("#planLevel").val();
		var planParam=$("#planParam").val();
		var createTime=$("#createTime").val();
		var updateTime=$("#updateTime").val();
				$.ajax({
					type: "post",//传递方法
					url: "/scheduler/plans",//数据接口
					data:JSON.stringify({planId:planId,planType:planType,planName:planName,planLevel:planLevel,planParam:planParam,createTime:createTime,updateTime:updateTime}),
					contentType: "application/json",
					success: function(msg)//如果接收成功执行以下
					{
						$('#dlg').dialog('close');		// 关闭 dialog
						$('#dg').datagrid('reload');
						console.log("调度计划信息插入成功");
						alert(msg);
					},
					error:function()//如果接收不成功执行以下
					{
						console.log("调度计划信息插入错误");
					}
			});
			eval("insert.style.display=\"none\";");
		return false;
	}
	<!--点击打开新增数据面板-->
	function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','新的调度计划信息');
			$('#fm').form('clear');

			var classIdValue = document.getElementById("new").name;
			alert(classIdValue);
			if(classIdValue == "newuser"){
				eval("insert.style.display=\"block\";");
			}
		}

	function editUser(){
		var row = $('#dg').datagrid('getSelected');

			var classIdValue = document.getElementById("edit").name;
			alert(classIdValue);
			if(classIdValue == "edituser"){
				eval("update.style.display=\"block\";");
			}

		if (row){
			$('#dlg').dialog('open').dialog('setTitle','编辑调度计划信息');
			$('#fm').form('load',row);
		}
	}

	function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','确定要删除这条数据吗?',function(r){
					if (r){
					    $.ajax({
							type:"delete",
							url:"/scheduler/plans/"+ row.id,
							contentType: "application/json",
							success:function (msg) {
								console.log("删除成功");
								$('#dg').datagrid('reload');
								alert(msg);
							},
							error:function () {
								console.log("删除错误");
							}
						});
					}
				});
			}
	}

	<!--修改数据-->
	function updateUser(){
		var row = $('#dg').datagrid('getSelected');

		var id=$("#id").val();
		var planId=$("#planId").val();
		var planType=$("#planType").val();
		var planName=$("#planName").val();
		var planLevel=$("#planLevel").val();
		var planParam=$("#planParam").val();
		var createTime=$("#createTime").val();
		var updateTime=$("#updateTime").val();
				$.ajax({
					type: "put",//传递方法
					url:"/scheduler/plans/"+ row.id,//数据接口
					data:JSON.stringify({id:row.id,planId:planId,planType:planType,planName:planName,planLevel:planLevel,planParam:planParam,createTime:createTime,updateTime:updateTime}),
					contentType: "application/json",
					success: function(msg)//如果接收成功执行以下
					{
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');
						console.log("调度计划信息修改成功");
						alert(msg);
					},
					error:function()//如果接收不成功执行以下
					{
						console.log("调度计划信息修改错误");
						alert(msg);
					}
			});
			eval("update.style.display=\"none\";");
		return false;
	}
	</script>
</html>